// 主题颜色变量
:root {
  // 亮色主题
  --header-bg-color-light: #409eff;
  --sidebar-bg-color-light: #304156;
  --bg-color-light: #f0f2f5;
  --container-bg-color-light: #ffffff;
  --text-color-primary-light: #303133;
  --text-color-secondary-light: #606266;
  --border-color-light: #dcdfe6;
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  // 暗色主题
  --header-bg-color-dark: #1d1e1f;
  --sidebar-bg-color-dark: #2c3e50;
  --bg-color-dark: #1a1a1a;
  --container-bg-color-dark: #2d2d2d;
  --text-color-primary-dark: #ffffff;
  --text-color-secondary-dark: #b2b2b2;
  --border-color-dark: #4c4c4c;
  --box-shadow-dark: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  
  // 当前主题变量
  --header-bg-color: var(--header-bg-color-light);
  --sidebar-bg-color: var(--sidebar-bg-color-light);
  --bg-color: var(--bg-color-light);
  --container-bg-color: var(--container-bg-color-light);
  --text-color-primary: var(--text-color-primary-light);
  --text-color-secondary: var(--text-color-secondary-light);
  --border-color: var(--border-color-light);
  --box-shadow: var(--box-shadow-light);
}

// 暗色主题类
.dark-theme {
  --header-bg-color: var(--header-bg-color-dark);
  --sidebar-bg-color: var(--sidebar-bg-color-dark);
  --bg-color: var(--bg-color-dark);
  --container-bg-color: var(--container-bg-color-dark);
  --text-color-primary: var(--text-color-primary-dark);
  --text-color-secondary: var(--text-color-secondary-dark);
  --border-color: var(--border-color-dark);
  --box-shadow: var(--box-shadow-dark);
}

// 主题色变量
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;

// 断点变量
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1600px;

// 间距变量
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3
);

// 边框圆角
$border-radius: 4px;
$border-radius-lg: 6px;
$border-radius-sm: 2px;

// 阴影
$box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
$box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.16);